<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="shared/css_js::header">
	<title>jQuery WeUI</title>
	<link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
</head>
<body>

<!--底部-->
<nav th:replace="shared/foot :: foot" class="mui-bar mui-bar-tab">
</nav>
<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title"><font size="4"><b>我的套餐</b></font></h1>
</header>

<div class="mui-content mui-slider">
	<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		<a class="mui-control-item" href="#tc">可使用套餐</a>
		<a class="mui-control-item" href="#untc">失效套餐</a>
	</div>
	<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
	<div class="mui-slider-group">
		<!--可使用-->
		<div id="tc" class="mui-slider-item mui-control-content ">
			<ul class="mui-table-view"  th:if="${list.size()>0}">
				<li class="mui-table-view-cell mui-media" >
					<a th:each="list:${list}" th:onclick="'javascript:tcdetail(\''+${list.tcoid}+'\')'"  style="background-color: cadetblue;margin: 7px;border-radius:10px;height: 110px">
						<p class="mui-pull-right" style="color: white" th:text="${list.chnname}"></p>
						<h2 class="mui-title" style="color: white;line-height: 4;font-weight: 700;text-align: center;font-size: 25px" th:text="${list.tcname}"></h2>
						<p style="color: white">有效期:<span th:text="${list.useenddate}"></span></p>
					</a>
				</li>
			</ul>
		</div>
		<!--失效-->
		<div id="untc" class="mui-slider-item mui-control-content ">
			<ul class="mui-table-view" th:if="${list1.size()>0}">
				<li class="mui-table-view-cell mui-media" >
					<a th:each="list1:${list1}" th:onclick="'javascript:tcdetail(\''+${list1.tcoid}+'\')'"  style="background-color: cadetblue;margin: 7px;border-radius:10px;height: 110px">
						<p class="mui-pull-right" style="color: white" th:text="${list1.chnname}"></p>
						<h2 class="mui-title" style="color: white;font-weight: 700;line-height: 4;text-align: center;font-size: 25px" th:text="${list1.tcname}"></h2>
						<p style="color: white">有效期:<span th:text="${list1.useenddate}"></span></p>
					</a>
				</li>
			</ul>
		</div>
	</div>
</div>

</body>
<script>

/*套餐计次卡详情*/
function tcdetail(id) {
	location.href="/person/tcdetail?tcoid="+id;
}

</script>
</html>
